Vue.component('wgr-complaint', {
    props: ['wgrForm','addForm','editForm','formDisabled','nameDisabled','comLink'],
    data: function () {
        return {
            provinceData: [],
            cityData: [],
            areaData: [],
            rules: {
                name: [{
                    required: true,
                    message: '请输入姓名',
                    trigger: 'blur'
                }],
                sex: [{
                    required: true,
                    message: '请选择性别',
                    trigger: 'change'
                }],
                phone: [{
                    required: true,
                    message: '请输入联系电话',
                    trigger: 'blur'
                }],
                province: [{
                    required: true,
                    message: '请选择省',
                    trigger: 'change'
                }],
                cities: [{
                    required: true,
                    message: '请选择市',
                    trigger: 'change'
                }],
                county: [{
                    required: true,
                    message: '请选择区、县',
                    trigger: 'change'
                }],
                random: [{
                    required: true,
                    message: '请输入通讯地址',
                    trigger: 'blur'
                }],
                records: [{
                    required: true,
                    message: '请输入违法活动记录',
                    trigger: 'blur'
                },{
                    max : 500,
                    message : '请输入长度最大为500个字符',
                    trigger : 'blur'
                }],
                creatTime: [{
                    required: true,
                    message: '必填',
                    trigger: 'blur'
                }]
            },
            comuuid: '',
            comLink: ''
        }
    },
    template: '<el-row type="flex" justify="center">\n' +
        '                    <el-col :span="15">\n' +
        '                        <el-form :model="wgrForm" :rules="rules" ref="wgrForm" label-width="180px">\n' +
        '                            <el-row>\n' +
        '                                <el-col :span="4" class="tab-title">\n' +
        '                                    投诉举报\n' +
        '                                </el-col>\n' +
        '                            </el-row>\n' +
        '                            <el-row>\n' +
        '                                <el-col :span="8">\n' +
        '                                    <el-form-item label="姓名:" prop="name" label-width="120px">\n' +
        '                                        <el-input v-model="wgrForm.name"  placeholder="" :disabled="nameDisabled"></el-input>\n' +
        '                                    </el-form-item>\n' +
        '                                </el-col>\n' +
        '                            </el-row>\n' +
        '                            <el-row>\n' +
        '                                <el-col>\n' +
        '                                    <el-form-item label="性别:" prop="sex" label-width="120px">\n' +
        '                                        <el-radio-group v-model="wgrForm.sex" :disabled="formDisabled">\n' +
        '                                            <el-radio label="男" >男</el-radio>\n' +
        '                                            <el-radio label="女" >女</el-radio>\n' +
        '                                        </el-radio-group>\n' +
        '                                    </el-form-item>\n' +
        '                                </el-col>\n' +
        '                            </el-row>\n' +
        '                            <el-row>\n' +
        '                                <el-col :span="8">\n' +
        '                                    <el-form-item label="联系电话:"  prop="phone" label-width="120px">\n' +
        '                                        <el-input v-model="wgrForm.phone"  placeholder="" :disabled="formDisabled"></el-input>\n' +
        '                                    </el-form-item>\n' +
        '                                </el-col>\n' +
        '                            </el-row>\n' +
        '                            <el-row>\n' +
        '                                <el-col>\n' +
        '                                    <el-form-item class="is-required" label="通讯地址:" label-width="120px">\n' +
        '                                       <el-col :span="4">\n' +
        '                                           <el-form-item prop="province">\n' +
        '                                               <el-select v-model="wgrForm.province" prop="province" placeholder="请选择省" @change="chooseProvince" :disabled="formDisabled">\n' +
        '                                                   <el-option\n' +
        '                                                   v-for="item in provinceData"\n' +
        '                                                   :key="item.code"\n' +
        '                                                   :label="item.name"\n' +
        '                                                   :value="item.name">\n' +
        '                                                  </el-option>\n' +
        '                                               </el-select>\n' +
        '                                           </el-form-item>\n' +
        '                                       </el-col>\n' +
        '                                       <el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">\n' +
        '                                           <span>—</span>\n' +
        '                                       </el-col>\n' +
        '                                       <el-col :span="4">\n' +
        '                                           <el-form-item prop="cities" :rules="rules.cityValue">\n' +
        '                                               <el-select v-model="wgrForm.cities"  prop="cities" placeholder="请选择市" @change="chooseCity" :disabled="formDisabled">\n' +
        '                                                   <el-option\n' +
        '                                                   v-for="item in cityData"\n' +
        '                                                   :key="item.code"\n' +
        '                                                   :label="item.name"\n' +
        '                                                   :value="item.name">\n' +
        '                                                   </el-option>\n' +
        '                                               </el-select>\n' +
        '                                           </el-form-item>\n' +
        '                                       </el-col>\n' +
        '                                       <el-col span="0.5" style="color: rgb(192, 204, 218);text-align: center;">\n' +
        '                                           <span>—</span>\n' +
        '                                       </el-col>\n' +
        '                                       <el-col :span="4">\n' +
        '                                           <el-form-item prop="county" :rules="rules.areaValue">\n' +
        '                                               <el-select v-model="wgrForm.county"  prop="county" @change="chooseArea" placeholder="请选择区、县" :disabled="formDisabled">\n' +
        '                                                   <el-option\n' +
        '                                                   v-for="item in areaData"\n' +
        '                                                   :key="item.code"\n' +
        '                                                   :label="item.name"\n' +
        '                                                   :value="item.name">\n' +
        '                                                   </el-option>\n' +
        '                                               </el-select>\n' +
        '                                           </el-form-item>\n' +
        '                                       </el-col>\n' +
        '                                       <el-input v-model="wgrForm.random"  placeholder="" style="width: 300px;margin-left: 15px;" :disabled="formDisabled"></el-input>\n' +
        '                                    </el-form-item>\n' +
        '                                </el-col>\n' +
        '                            </el-row>\n' +
        '                            <el-row>\n' +
        '                                <el-col :span="22">\n' +
        '                                    <el-form-item label="违法活动记录:" prop="records" label-width="120px">\n' +
        '                                        <el-input\n' +
        '                                                type="textarea"\n' +
        '                                                :autosize="{ minRows: 8, maxRows: 8}"\n' +
        '                                                placeholder=""\n' +
        '                                                maxlength="500"\n' +
        '                                                show-word-limit\n' +
        '                                                :disabled="formDisabled"\n' +
        '                                                v-model="wgrForm.records">\n' +
        '                                        </el-input>\n' +
        '                                    </el-form-item>\n' +
        '                                </el-col>\n' +
        '                            </el-row>\n' +
        '                            <el-row>\n' +
        '                                <el-col :span="22">\n' +
        '                                    <el-form-item label="附件:" prop="" label-width="120px">\n' +
        '                                        <iframe width="100%"  style="height: 200px;border: none;" :src="comLink"></iframe>\n' +
        '                                    </el-form-item>\n' +
        '                                </el-col>\n' +
        '                            </el-row>\n' +
        '                            <el-row>\n' +
        '                                <el-col :span="22">\n' +
        '                                    <div style="float:right;">\n' +
        '                                        <el-button v-show="addForm" type="primary" size="small" style="width: 60px;height: 30px;" @click="zcSubmit(\'wgrForm\')">暂存</el-button>\n' +
        '                                        <el-button v-show="addForm" type="primary" size="small" style="width: 60px;height: 30px;" @click="onSubmit(\'wgrForm\')">提交</el-button>\n' +
        '                                        <el-button v-show="editForm" type="primary" size="small" style="width: 60px;height: 30px;" @click="editSubmit(\'wgrForm\')">修改</el-button>\n' +
        '                                        <el-button type="primary" size="small" style="width: 60px;height: 30px;" @click="cancel(\'wgrForm\')">取消</el-button>\n' +
        '                                    </div>\n' +
        '                                </el-col>\n' +
        '                            </el-row>\n' +
        '                        </el-form>\n' +
        '                    </el-col>\n' +
        '                </el-row>',
    mounted(){
       // this.created();
      //  this.getUuid();
       // console.log(this.namediabled);
    },
    methods: {
    	// 表单暂存
        zcSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.wgrForm.id=this.comuuid;
                    var date = new Date();
                    var y = date.getFullYear();
                    var MM = date.getMonth() + 1;
                    MM = MM < 10 ? ('0' + MM) : MM;
                    var d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    var h = date.getHours();
                    h = h < 10 ? ('0' + h) : h;
                    var m = date.getMinutes();
                    m = m < 10 ? ('0' + m) : m;
                    var s = date.getSeconds();
                    s = s < 10 ? ('0' + s) : s;
                    console.log(y + '-' + MM + '-' + d);
                    this.wgrForm.creatTime = y + '-' + MM + '-' + d;
                    axios({
                        method: 'post',
                        url: appBaseUrl + '/compaint/zcAppeal',
                        data: this.wgrForm
                    })
                    .then((response) => {
                        let data = response.data;
                        if (data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '暂存成功!'
                            });
                            this.getUuid();
                            this.cancel();
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                } else {
                    console.log("error!!");
                    return false;
                }
            });
        },
        // 表单提交
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.wgrForm.id=this.comuuid;
                    var date = new Date();
                    var y = date.getFullYear();
                    var MM = date.getMonth() + 1;
                    MM = MM < 10 ? ('0' + MM) : MM;
                    var d = date.getDate();
                    d = d < 10 ? ('0' + d) : d;
                    var h = date.getHours();
                    h = h < 10 ? ('0' + h) : h;
                    var m = date.getMinutes();
                    m = m < 10 ? ('0' + m) : m;
                    var s = date.getSeconds();
                    s = s < 10 ? ('0' + s) : s;
                    console.log(y + '-' + MM + '-' + d);
                    this.wgrForm.creatTime = y + '-' + MM + '-' + d;
                    axios({
                        method: 'post',
                        url: appBaseUrl + '/compaint/add',
                        data: this.wgrForm
                    })
                    .then((response) => {
                        let data = response.data;
                        if (data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            });
                            this.getUuid();
                            this.cancel();
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                } else {
                    console.log("error!!");
                    return false;
                }
            });
        },
        // 表单修改
        editSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    axios({
                        method: 'post',
                        url: appBaseUrl + '/compaint/update',
                        data: this.wgrForm
                    })
                    .then((response) => {
                        let data = response.data;
                        if (data.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.getUuid();
                            this.cancel();
                        } else {
                            this.$message.error(data.msg);
                        }
                    });
                } else {
                    console.log("error!!");
                    return false;
                }
            });
        },
        // 关闭表单
        cancel(){
            this.$emit('cancel');
        },
        created() {
            axios.get(appBaseUrl + '/json/ChinaCity.json').then(res => {
                this.provinceData = res.data;
            }).catch(e => {
                    this.$message.error("网络连接超时");
            });
        },
        //获取UUID的方法
        getUuid() {
            axios({
                method: 'get',
                url: appBaseUrl + '/uuid/getUuid',
            })
            .then(response => {
                if (response.data.code == 200) {
                    this.comuuid = response.data.data;
                    this.comLink= appBaseUrl + "/html/upload/annex2.html?uuid="+this.comuuid+"&flag=0";
                } else {
                    this.$message.error(response.data.msg);
                }
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        /*clearForm(){
            this.$refs.wgrForm.resetFields();
            this.wgrForm.id = '';
            this.wgrForm.name = '';
            this.wgrForm.sex = '';
            this.wgrForm.phone = '';
            this.wgrForm.province = '';
            this.wgrForm.cities='';
            this.wgrForm.county='';
            this.wgrForm.random='';
            this.wgrForm.creatTime = '';
            this.wgrForm.appealContent = '';
        },*/
        chooseProvince(value){
            this.wgrForm.cities = '';
            this.wgrForm.county = '';
            this.cityData = [];
            this.areaData = [];
            this.provinceData.map(e=>{//遍历数据
                if( value == e.name){
                    this.cityData = e.cityList;
                    return;
                }
            })
        },
        chooseCity(value){
            this.wgrForm.county = '';
            this.cityData.map(e=>{//遍历数据
                if( value == e.name){
                    this.areaData = e.areaList;
                    return;
                }
            })
        },
        chooseArea(value){
            this.wgrForm.county = value;
        }
    }
})
